<!-- 年审记录 -->
<template>
  <div>
    <el-dialog
      title="年审记录"
      width="60%"
      :visible.sync="dialogVisible"
      @close="handlerClose"
    >
      <div class="dialog">
        <el-table :data="ticketList" stripe>
          <el-table-column label="上报时间" prop="reportTime" align="center" />
          <el-table-column label="开通时间" prop="openTime" align="center" />
          <el-table-column label="状态" prop="auditStatusName" align="center" />
          <el-table-column label="操作" align="center" width="200">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleDetail(scope.row)">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="pageInfo.total > 0" :total="pageInfo.total" :page.sync="pageInfo.currentPage" :limit.sync="pageInfo.pageSize" @pagination="onPagination" />
      </div>
    </el-dialog>
    <AnnualDetail v-if="annualVisible" ref="annualRef" source="detail" :visible.sync="annualVisible" />
  </div>
</template>

<script>
import {
  doYearAuditApplication
} from '@/api/xjs/work-order'
import { auditStatusList } from '@/utils/common'
import AnnualDetail from '@/views/xjsxxm/annual/components/review.vue'
export default {
  components: {
    AnnualDetail
  },
  data() {
    return {
      dialogVisible: false,
      annualVisible: false,
      auditStatusList: auditStatusList,
      ticketList: [],
      listQuery: {
        otherId: ''
      },
      pageInfo: {
        total: 0,
        currentPage: 1,
        pageSize: 10
      }
    }
  },
  methods: {
    handlerClose() {
      this.$emit('update:visible', false)
    },
    open(id) {
      console.log(id)
      this.dialogVisible = true
      this.listQuery.otherId = id
      this.getInit()
    },
    handleDetail(row) {
      this.annualVisible = true
      this.$nextTick(() => {
        this.$refs.annualRef.open(row, false)
      })
    },
    // 分页
    onPagination(obj) {
      this.pageInfo.currentPage = obj.page
      this.pageInfo.pageSize = obj.limit
      this.getInit()
    },
    getInit() {
      const params = {
        ...this.listQuery,
        ...this.pageInfo
      }
      doYearAuditApplication(params).then(res => {
        const data = res.records
        data.forEach(item => {
          const auditStatusObj = this.auditStatusList.find(it => it.value == item.auditStatus)
          if (auditStatusObj) {
            item.auditStatusName = auditStatusObj.label
          }
        })
        this.ticketList = res.records
        this.pageInfo.total = res.total
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
